<html>
	<head>
		<title>Login</title>
		<link rel="stylesheet" href="../css/style.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
		<style>
			#dialog { min-width: 200px; }
		</style>
	</head>
	<body class="claro">
		<input id="username" />
		<input id="password" />
		<button id="login" type="button"></button>
		<script>dojoConfig = {parseOnLoad: true}</script>
		<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
		<script>
			require(["dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button",
				"dijit/form/TextBox", "dojo/keys", "dojo/request"], 
				function(ready, BorderContainer, ContentPane, Button, TextBox, keys, request){
					ready(function() {
							
						var bc = new BorderContainer({style: "width: 100%; height: 100%", gutters: false});
						var top = new ContentPane({
							region:"top",
							style: "height: 40%;",
							content: ""});
						var center = new ContentPane({
							region: "center",
							content: ""});
						var leading = new ContentPane({
							region: "leading",
							style: "width: 40%;",
							content: ""});
						var trailing = new ContentPane({
							region: "trailing",
							style: "width: 40%;",
							content: ""});
						var username = new TextBox({
							name: "username",
							style: "width: 100%;",
							value: "",
							placeholder: "Username",
							onKeyPress: function(e) {
								if (e.keyCode == keys.ENTER) {
									loginPost();
								}
							}}, "username");
						var password = new TextBox({
							name: "password",
							style: "width: 100%;",
							value: "",
							type: "password",
							placeholder: "Password",
							onKeyPress: function(e) {
								if (e.keyCode == keys.ENTER) {
									loginPost();
								}
							}}, "password");
						var login = new Button({
							region: "center",
							name: "login",
							label: "Login",
							onClick: loginPost
							}, "login");
						var valid = new TextBox({
							region: "center",
							style: "width: 100%;",
							name: "valid",
							readOnly: true});
						center.set("content", [
							username.domNode,
							password.domNode,
							login.domNode,
							valid.domNode]);
						bc.addChild(top);
						bc.addChild(leading);
						bc.addChild(trailing);
						bc.addChild(center);
						document.body.appendChild(bc.domNode);
						
						function loginPost() {
							request.post("/auth/login", {
								data: {
									username: username.value,
									password: password.value,
									from_page: "/"},
									handleAs: "json"}).then(function(data){
										if (data == "Successful"){
											window.location = "/";
										} else {
											valid.set("value", "Wrong Login");
										}
								});
							}
						
						bc.startup();
					});
				});
		</script>
	</body>
</html>
